<template>
  <el-card shadow="hover">
    <div class="box">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <div class="right">
        <span @click="getDayValue">今日</span>
        <span @click="getWeekValue">本周</span>
        <span @click="getMouthValue">本月</span>
        <span @click="getYearValue">本年</span>
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="入住时间"
          end-placeholder="离开时间"
          size="small"
          v-model="time"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <v-chart
          :option="getOption()"
          :autoresize="true"
          style="height: 400px"
        ></v-chart>
      </el-col>
      <el-col :span="6">
        <h5 class="title">
          门店{{ activeName == "sale" ? "销售额" : "访问量" }}排名
        </h5>
        <ul class="box2">
          <li v-for="(item, index) in prop.data.orderRank" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "_dayjs@1.11.6@dayjs";

let activeName = ref("sale");

let time = ref([]);
//获取今天的日期
let getDayValue = () => {
  let start = dayjs().format("YYYY-MM-DD");
  let end = dayjs().format("YYYY-MM-DD");
  time.value = [start, end];
};
//获取本周的日期
let getWeekValue = () => {
  let start = dayjs().day(1).format("YYYY-MM-DD");
  let end = dayjs().day(7).format("YYYY-MM-DD");
  time.value = [start, end];
};
//获取本月的日期
let getMouthValue = () => {
  let start = dayjs().startOf("month").format("YYYY-MM-DD");
  let end = dayjs().endOf("month").format("YYYY-MM-DD");
  time.value = [start, end];
};
//获取本年的日期
const getYearValue = () => {
  let start = dayjs().startOf("year").format("YYYY-MM-DD");
  let end = dayjs().endOf("year").format("YYYY-MM-DD");
  time.value = [start, end];
};
//柱状图配置
const getOption = () => {
  return {
    title: {
      text: activeName.value == "sale" ? "销售额" : "访问量",
      left: "45%",
      textStyle: {
        color: "black",
      },
    },
    xAxis: [
      {
        type: "category",
        data: prop.data.orderFullYearAxis,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        //y轴的轴线
        axisLine: {
          show: true,
        },
        //y轴的刻度
        axisTick: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data:
          activeName.value == "sale"
            ? prop.data.orderFullYear
            : prop.data.userFullYear,
        //每一个柱状图的颜色
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgb(37, 237, 144)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgb(246, 250, 37)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //图形上的文本标签
        label: {
          show: true,
          color: "yellowgreen",
          position: "top",
        },
      },
    ],
  };
};

let prop = defineProps(["data"]);
</script>

<style scoped>
.box {
  position: relative;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}
.right span {
  font-size: 14px;
  margin: 0px 10px;
  color: rgb(37, 143, 250);
}
::v-deep .el-range-separator {
  color: yellowgreen;
  font-size: 20px;
}
.title{
  line-height:15px;
  font-size:20px;
  margin: 5px;
}
.box2 {
  list-style: none;
  width: 100%;
  height: 80%;
}
.box2 li {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;
}
.box2 li span{
  font-size: 14px;  
}
.box2 li .active{
  border-radius:50%;
  width: 15px;
  height: 15px;
  background-color: aquamarine;
  
}
</style>